<template>
  <div class="header-bar">
    <div class="header-left">
      <div class="logo" @click="goHome">
        <img src="@/assets/xiaozhi-logo.png" alt="Logo" />
        <span>小智AI</span>
      </div>
    </div>

    <div class="header-center">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="home">首页</el-menu-item>
        <el-submenu index="config">
          <template slot="title">配置管理</template>
          <el-menu-item index="model-config">模型配置</el-menu-item>
          <el-menu-item index="params-management" v-if="isSuperAdmin">参数字典</el-menu-item>
          <el-menu-item index="apikey-management" v-if="isSuperAdmin">API密钥管理</el-menu-item>
        </el-submenu>
        <el-submenu index="system" v-if="isSuperAdmin">
          <template slot="title">系统管理</template>
          <el-menu-item index="user-management">用户管理</el-menu-item>
          <el-menu-item index="dict-management">字典管理</el-menu-item>
          <el-menu-item index="provider-management">供应商管理</el-menu-item>
          <el-menu-item index="server-side-management">服务端管理</el-menu-item>
        </el-submenu>
        <el-submenu index="device">
          <template slot="title">设备管理</template>
          <el-menu-item index="device-management">设备列表</el-menu-item>
          <el-menu-item index="ota-management">OTA管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

    <div class="header-right">
      <div class="user-info">
        <el-dropdown @command="handleUserCommand">
          <span class="el-dropdown-link">
            {{ userInfo.username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <ChangePasswordDialog :visible.sync="isChangePasswordDialogVisible" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import ChangePasswordDialog from '@/components/ChangePasswordDialog.vue';
import userApi from '@/apis/module/user.js';

export default {
  name: 'HeaderBar',
  components: {
    ChangePasswordDialog
  },
  props: ['devices'],
  data() {
    return {
      search: '',
      userInfo: {
        username: '',
        mobile: ''
      },
      isChangePasswordDialogVisible: false,
      userDropdownVisible: false,
      paramDropdownVisible: false,
      isSmallScreen: false
    }
  },
  computed: {
    ...mapGetters(['getIsSuperAdmin']),
    isSuperAdmin() {
      return this.getIsSuperAdmin;
    },
    activeIndex() {
      const routeName = this.$route.name;
      switch (routeName) {
        case 'ModelConfig': return 'model-config';
        case 'ParamsManagement': return 'params-management';
        case 'ApiKeyManagement': return 'apikey-management';
        case 'UserManagement': return 'user-management';
        case 'DictManagement': return 'dict-management';
        case 'ProviderManagement': return 'provider-management';
        case 'ServerSideManager': return 'server-side-management';
        case 'DeviceManagement': return 'device-management';
        case 'OtaManagement': return 'ota-management';
        default: return 'home';
      }
    }
  },
  mounted() {
    this.fetchUserInfo();
    this.checkScreenSize();
    window.addEventListener('resize', this.checkScreenSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScreenSize);
  },
  methods: {
    ...mapActions(['logout']),
    goHome() {
      this.$router.push('/home')
    },
    handleSelect(key) {
      switch (key) {
        case 'home':
          this.$router.push('/home');
          break;
        case 'model-config':
          this.$router.push('/model-config');
          break;
        case 'params-management':
          this.$router.push('/params-management');
          break;
        case 'apikey-management':
          this.$router.push('/apikey-management');
          break;
        case 'user-management':
          this.$router.push('/user-management');
          break;
        case 'dict-management':
          this.$router.push('/dict-management');
          break;
        case 'provider-management':
          this.$router.push('/provider-management');
          break;
        case 'server-side-management':
          this.$router.push('/server-side-management');
          break;
        case 'device-management':
          this.$router.push('/device-management');
          break;
        case 'ota-management':
          this.$router.push('/ota-management');
          break;
      }
    },
    handleUserCommand(command) {
      switch (command) {
        case 'changePassword':
          this.showChangePasswordDialog();
          break;
        case 'logout':
          this.handleLogout();
          break;
      }
    },
    fetchUserInfo() {
      userApi.getUserInfo(({ data }) => {
        this.userInfo = data.data
        if (data.data.superAdmin !== undefined) {
          this.$store.commit('setUserInfo', data.data);
        }
      })
    },
    checkScreenSize() {
      this.isSmallScreen = window.innerWidth <= 1386;
    },
    showChangePasswordDialog() {
      this.isChangePasswordDialogVisible = true;
    },
    async handleLogout() {
      try {
        await this.logout();
        this.$message.success({
          message: '退出登录成功',
          showClose: true
        });
      } catch (error) {
        console.error('退出登录失败:', error);
        this.$message.error({
          message: '退出登录失败',
          showClose: true
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  position: relative;
  z-index: 1000;

  .header-left {
    .logo {
      display: flex;
      align-items: center;
      cursor: pointer;

      img {
        height: 30px;
        margin-right: 10px;
      }

      span {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
    }
  }

  .header-center {
    flex: 1;
    margin: 0 20px;

    .el-menu-demo {
      background: transparent;
      border: none;

      .el-menu-item,
      .el-submenu__title {
        font-size: 14px;
        color: #333;

        &:hover {
          background-color: #f0f0f0;
        }

        &.is-active {
          color: #409EFF;
          border-bottom: 2px solid #409EFF;
        }
      }
    }
  }

  .header-right {
    .user-info {
      .el-dropdown-link {
        cursor: pointer;
        color: #333;
        display: flex;
        align-items: center;

        i {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>